<script setup>
  import { computed, ref } from 'vue'
  import consult from '@/store/consult.js'
  const consultStore = consult()
  const next = () => {
    consultStore.setInitalValue(formData.value)
    consultStore.setType(props.type)
    consultStore.setIllnessType(props.illnessType)
    consultStore.setDepId(props.depId)
    uni.navigateTo({
      url: '/subpkg_consult/patient/index'
    })
  }
  const props = defineProps({
    type: String,
    illnessType: String,
    depId: String
  })
  const formData = ref({
    illnessDesc: '',
    illnessTime: 1,
    consultFlag: 0,
    pictures: []
  })
  const formInfo = computed(() => {
    const pictures = formData.value.pictures.map((v) => ({
      id: v.uuid,
      url: v.url
    }))
    return {
      ...formData.value,
      pictures
    }
  })
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' }
  ]
  // 是否就诊过
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' }
  ]
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            v-model.trim="formData.illnessDesc"
            type="textarea"
            :styles="{ backgroundColor: '#f6f6f6' }"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="v in illnessTimes"
            :key="v.value"
            class="tag"
            :class="{ active: formData.illnessTime === v.value }"
            @click="formData.illnessTime = v.value"
          >
            {{ v.text }}
          </text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="v in consultFlags"
            :key="v.value"
            :class="{ active: formData.consultFlag === v.value }"
            @click="formData.consultFlag = v.value"
            class="tag"
          >
            {{ v.text }}
          </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          v-model="formData.pictures"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        class="uni-button"
        :disabled="!formData.illnessDesc"
        @click="next"
      >
        下一步
      </button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  .description-page {
    padding: 30rpx 30px 200rpx;
  }

  .doctor-online {
    display: flex;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #ededed;

    .doctor-avatar {
      width: 110rpx;
      height: 110rpx;
    }

    .doctor-info {
      flex: 1;
      margin-left: 20rpx;
    }

    .name {
      line-height: 1;
      padding-left: 20rpx;
      font-size: 32rpx;
      color: #121826;
    }

    .message {
      line-height: 1.5;
      padding: 20rpx;
      margin: 20rpx 0;
      color: #6f6f6f;
      font-size: 26rpx;
      border-radius: 20rpx;
      background-color: #f6f6f6;
    }

    .tips {
      display: flex;
      align-items: center;
      color: #6f6f6f;
      font-size: 24rpx;
    }

    .icon-shield {
      font-size: 28rpx;
      margin-right: 5rpx;
    }
  }

  .patient-info {
    margin-top: 30rpx;

    .description {
      width: 100%;
      height: 240rpx;
      padding: 30rpx;
      border-radius: 20rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      color: #121826;
      background-color: #f6f6f6;
    }

    .title {
      margin: 30rpx 0 10rpx;
      font-size: 28rpx;
      color: #3c3e42;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;

      .tag {
        line-height: 1;
        padding: 16rpx 20rpx 14rpx;
        margin: 20rpx 20rpx 20rpx 0;
        font-size: 26rpx;
        border-radius: 10rpx;
        color: #3c3e42;
        border: 1rpx solid transparent;
        background-color: #f6f6f6;

        &.active {
          color: #2cb5a5;
          border-color: #2cb5a5;
          background-color: rgba(44, 181, 165, 0.1);
        }
      }
    }
  }

  .patient-picture {
    margin-top: 30rpx;

    :deep(.uni-file-picker__header) {
      padding-top: 0;
      padding-bottom: 30rpx;
    }

    :deep(.file-title) {
      font-size: 28rpx;
      color: #3c3e42;
    }

    :deep(.file-count) {
      font-size: 28rpx;
    }

    :deep(.file-picker__box-content) {
      background-color: #f6f6f6;
      border: none !important;
      border-radius: 10rpx !important;
    }

    :deep(.icon-add) {
      width: 60rpx;
      height: 4rpx;
      background-color: #ccc;
    }

    :deep(.icon-del-box) {
      right: -3px !important;
      top: -3px !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
      transform: scale(0.6) rotate(-45deg) !important;
    }
  }

  .next-step {
    position: sticky;
    right: 0;
    left: 0;
    bottom: env(safe-area-inset-bottom);
    z-index: 100;
    padding: 30rpx 40rpx;
    background-color: #fff;
  }
</style>
